<template>
    <el-dialog v-model="dialogVisible" :align-center="true" title="导入数据" width="600px" @close="handleClose">
        <el-scrollbar max-height="60vh">
            <el-form ref="importFormRef" label-width="auto" style="padding-right: var(--el-dialog-padding-primary)"
                :model="importFormData" :rules="importFormRules">
                <el-form-item label="文件名" prop="files">
                    <el-upload class="w-full" ref="uploadRef" v-model:file-list="importFormData.files"
                        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                        :drag="true" :limit="1" :auto-upload="false" :on-exceed="handleFileExceed">
                        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                        <div class="el-upload__text">
                            将文件拖到此处，或<em>点击上传</em>
                        </div>
                        <template #tip>
                            <div class="el-upload__tip">
                                *.xlsx / *.xls
                                <el-link type="primary" icon="download" :underline="false"
                                    @click="handleDownloadTemplate">
                                    下载模板
                                </el-link>
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
            </el-form>
        </el-scrollbar>
        <template #footer>
            <div style="padding-right: 12px">
                <el-button type="primary" :disabled="importFormData.files.length === 0" @click="handleSubmit">
                    确 定
                </el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { defineEmits, defineProps } from 'vue';

import SkuApi from '@/api/sku';

const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    }
})

const emit = defineEmits(["update:visible", "import-success"]);

const dialogVisible = computed({
    get: () => props.visible,
    set: (val) => {
        emit("update:visible", val);
    }
});

const importFormRef = ref(null);
const uploadRef = ref(null);

const importFormData = ref({
  files: []
})
const importFormRules = {
  files: [{ required: true, message: "文件不能为空", trigger: "blur" }],
};
const handleClose = () => {
  dialogVisible.value = false;
};
const handleSubmit = async () => {

  let files = importFormData.value.files
  console.log("importFormData", files[0].raw)
  if (!files.length) {
    ElMessage.warning("请选择文件");
    return;
  }

  try {
    await SkuApi.import(files[0].raw);
    ElMessage.success("上传成功");
    emit("import-success");
    handleClose();
  } catch (error) {
    ElMessage.error("上传失败");
  }
};

const handleFileExceed = () => {
  ElMessage.warning("只能上传一个文件");
};

const handleDownloadTemplate = () => {
  SkuApi.downloadTemplate().then((response) => {
    const fileData = response.data;
    const fileName = decodeURI(
      response.headers["content-disposition"].split(";")[1].split("=")[1]
    );
    const fileType =
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";

    const blob = new Blob([fileData], { type: fileType });
    const downloadUrl = window.URL.createObjectURL(blob);

    const downloadLink = document.createElement("a");
    downloadLink.href = downloadUrl;
    downloadLink.download = fileName;

    document.body.appendChild(downloadLink);
    downloadLink.click();

    document.body.removeChild(downloadLink);
    window.URL.revokeObjectURL(downloadUrl);
  });
};
</script>